<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="付款时间">
          <el-date-picker
            v-model="state.params._dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
        <el-form-item>

          <el-input v-model="state.params._keyword" clearable :placeholder="`请输入${filterMap[state.params._filterType]}`" class="input-with-select" style="width: 300px">
            <template #prepend>
              <el-select v-model="state.params._filterType" placeholder="请选择搜索类型" style="width: 128px">
                <el-option v-for="(o ,i) in filterOptions" :key="i" :label="o.label" :value="o.value" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="会员类别">
          <el-select v-model="state.params.vip_title">
            <el-option v-for="(o, i) in vipTitleOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="付款方式">
          <el-select v-model="state.params.pay_type" style="width: 180px">
            <el-option v-for="(o, i) in payTypeOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="1级渠道">
          <el-input v-model="state.params.xsource" clearable placeholder="请输入1级渠道"></el-input>
        </el-form-item>
        <el-form-item label="2级渠道">
          <el-input v-model="state.params.xterm" clearable placeholder="请输入2级渠道"></el-input>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KToolbar>
        <template #right>
          <el-button type="default" :icon="Download" @click="onClickExportData">导出数据</el-button>
        </template>
      </KToolbar>

      <KTable v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <el-link type="primary" @click="onClickEdit(s.row)">编辑</el-link>
        </template>
      </KTable>
    </div>
    <EditDrawer ref="drawerRef" @after-submit="onAfterSubmit" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Download } from '@element-plus/icons-vue';
import EditDrawer from './components/edit-drawer.vue';

import { filterOptions, filterMap, vipTitleOptions, payTypeOptions, useTableList } from './hooks/use-table';
import { exportDyjOrderList } from '@/api/crm-dyj/download';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'DyjOrderList' });

const { state, tableState, tableEvent, ...methods } = useTableList({});

const drawerRef = ref();

const onClickExportData = () => {
  exportDyjOrderList(methods.getParams(state.params));
};

// 编辑
const onClickEdit = (row: any) => {
  drawerRef.value?.show(Number(!!row), row);
};

/** 保存后的回调 */
const onAfterSubmit = () => {
  methods.onSearch();
};

</script>
<style lang="scss">
.k-search.el-form--inline .el-input {
  width: unset;
  min-width: 128px;
}
</style>
